<template>
    <div class="send_box">
        <div class="top">
            <div class="title">
                <el-input maxlength="20" v-model="value" placeholder="输入内容" size="normal" clearable @change=""></el-input>
            </div>
            <div class="categrea">
                <div class="item" :class="{ active: it.id == chooseid }" @click="choose(it.id)" v-for="it in tabbat"
                    :key="it.id">
                    {{ it.text }}
                </div>
            </div>
            <div class="uploader">
                <el-upload v-model:file-list="fileList" :limit="10" :on-exceed="exceed" :on-success="success"
                    action="/api/upimages" list-type="picture-card" :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </div>
            <div class="upfile">
                <el-button type="primary" size="default" @click="upfile">上传</el-button>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, type UploadProps, type UploadUserFile } from 'element-plus'
import artstore from '@/store/module/aricl'
let Artstore = artstore()
let tabbat = reactive<any>([
    { text: '头像', id: 1 }, { text: '手机壁纸', id: 2 }, { text: '电脑壁纸', id: 3 }, { text: '萌宠', id: 4 }
])
//获取当前用户id
import { GetCurrentUserId } from '@/utils/GetCurrentUserId'
let fileList = ref<UploadUserFile[]>([])
let value = ref<any>('')
//分类id
let chooseid = ref(1)
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
let temparr = reactive<any>([])
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
const success = (e: any) => {
    console.log(e)
    // console.log(fileList.value)
    temparr.push(e.data.path)
    console.log(temparr)
}
const choose = (e: any) => {
    chooseid.value = e
}
const upfile = () => {
    if (value.value.trim() == '') {
        ElMessage({
            message: '标题不能为空',
            type: 'error'
        })
        return;
    }
    if (temparr.length == 0) {
        ElMessage({
            message: '至少上传一张图片',
            type: 'error'
        })
        return;
    }
    console.log(temparr)
    let data = {
        concent: value.value,
        imgurl: temparr,
        user_id: GetCurrentUserId(),
        catagrea: chooseid.value
    }
    Artstore.upart(data).then(() => {
        ElMessage({
            message: '成功',
            type: 'success'
        })
        value.value = ''
        temparr = []
        fileList.value = []
    }).catch(() => {
        ElMessage({
            message: '登录过期',
            type: 'error'
        })
    })


}
const exceed = () => {
    ElMessage({
        message: '最多十张',
        type: 'error'
    })

}
</script>

<style lang="scss" scoped>
.send_box {
    .top {
        .categrea {
            display: flex;
            margin-bottom: 0.1333rem;

            .item {
                cursor: pointer;
                text-align: center;
                margin-right: 0.13333rem;
                width: 1.333rem;
                font-family: '楷体';
                padding: 0.0667rem;
                border: 0.0133rem solid black;

                &.active {
                    background-color: #FFE9A3;
                }
            }
        }

        .title {
            font-size: .8rem;
        }

        .upfile {
            margin-top: 0.2333rem;
        }
    }
}
</style>